<script lang="ts" setup>
import { useRouter } from 'vue-router'
import { hBtns, UiDataView, apiStatusSelect, openModal } from '../../utils'
import { Download, Plus, Upload } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox, ElTag } from "element-plus"
import { onMounted, ref } from 'vue'

import { DataViewRef, PageFetchAction, TableCellBtn, TableColumnConfig } from '../../utils/types'
import { apiAPI, apiDict } from '../../api'

const router = useRouter()

const tableRef: DataViewRef = ref()

const httpMethods = ref([])

const onTest = (row: any) => router.push(`/test/${row.apiId}`)

const onEdit = (row?: any) => {
  router.push(row ? `/apis/edit/${row.apiId}` : '/apis/add')
}

const publish = async (row: any) => {
  await ElMessageBox.confirm('确定要发布吗？', { type: 'info', title: '发布' })
  ElMessage.success('发布成功')
}

const offline = async (row: any) => {
  await ElMessageBox.confirm('确定要下线吗？', { type: 'warning', title: '下线' })
  ElMessage.success('下线成功')
}

const onDelete = (row: any) => {
  tableRef.value.deleteRows(() => {})
}

const switchVersion = (row: any) => {
  openModal(() => import('./SwitchVersion.vue'), {
    row,
    onSubmitted () {}
  })
}

const columns = [
  { label: 'API类型', prop: 'apitype', minWidth: 100 },
  { label: '请求方式', prop: 'request_type', minWidth: 100 },
  { label: 'APIID', prop: 'apiId', minWidth: 170, showOverflowTooltip: true },
  { label: 'URL', prop: 'url', minWidth: 150, showOverflowTooltip: true },
  { label: 'API名称', prop: 'name', minWidth: 120, showOverflowTooltip: true },
  { label: '拥有者', prop: 'owner', minWidth: 100 },
  { label: '修改者', prop: 'reviser', minWidth: 100 },
  { label: '注册时间', prop: 'createTime', minWidth: 170 },
  {
    label: '状态',
    fixed: 'right',
    width: 90,
    render (h, { row }) {
      const item = apiStatusSelect.getItem(row.status)
      return item.label && h(ElTag, { type: item.type as any }, { default: () => item.label })
    }
  },
  {
    label: '操作',
    fixed: 'right',
    width: 130,
    render (h, { row }) {
      return hBtns([
        { label: '修改', onClick: onEdit.bind(null, row) },
        { label: '测试', onClick: onTest.bind(null, row) },
        { label: '历史版本', onClick: switchVersion.bind(null, row) },
        { label: '添加版本', onClick: onEdit.bind(null, row) },
        { label: '下线', onClick: offline.bind(null, row) },
        { label: '发布', onClick: publish.bind(null, row) },
        { label: '删除', onClick: onDelete.bind(null, row) }
      ] as TableCellBtn[])
    }
  }
] as TableColumnConfig<any>[]

const fetchAction: PageFetchAction = params => {
  return apiAPI.pageList(params)
}

onMounted(() => {
  tableRef.value.getData()
  apiDict
    .getList(apiDict.DictType.HTTP_METHOD)
    .then(res => {
      httpMethods.value = res.rows
    })
})
</script>

<template>
  <UiDataView ref="tableRef" :columns="columns" :fetch-action="fetchAction">
    <template #search="{ form, onSearch }">
      <ElFormItem label="拥有者">
        <ElSelect clearable v-model="form.owner" @change="onSearch"></ElSelect>
      </ElFormItem>
      <ElFormItem label="创建者">
        <ElInput v-model="form.creator" @keyup.enter="onSearch" />
      </ElFormItem>
      <ElFormItem label="api类型">
        <ElSelect clearable v-model="form.apitype" @change="onSearch"></ElSelect>
      </ElFormItem>
      <ElFormItem label="请求方式">
        <ElSelect clearable v-model="form.request_type" @change="onSearch">
          <ElOption v-for="_ in httpMethods" :key="_.dictValue" :value="_.dictValue" />
      </ElSelect>
      </ElFormItem>
      <ElFormItem label="状态">
        <ElSelect clearable v-model="form.state" @change="onSearch">
          <ElOption v-for="_ in apiStatusSelect.data" :key="_.value" v-bind="_" />
        </ElSelect>
      </ElFormItem>
    </template>
    <template #actions>
      <ElButton :icon="Plus" type="primary" @click="onEdit()">新增API</ElButton>
      <ElButton :icon="Upload">导入</ElButton>
      <ElButton :icon="Download">导出</ElButton>
    </template>
  </UiDataView>
</template>
